<template>
   
    <div class="newsinfo">
       
       <h3 class="title">{{newsInfo.newsTitle}}</h3>
       <p class="subtitle">
           <span>发表时间:{{newsInfo.newsDate | dateFmt()}}</span>
           <span>点击：{{newsInfo.readNum}}次</span>
       </p>
       <hr>
        <div class="content" v-html="newsInfo.newsContent">
            {{newsInfo.newsContent}}
        </div>
         <!-- 评论区域 -->
         <comments :newsId="id"></comments>
    </div>
   
</template>
<script>
import comments from './Comments.vue'
export default {
    components:{comments},
    data(){
        return {
            id:this.$route.params.id,
            newsInfo:{}//是不是根据新闻的id找到的
        }
    },
    methods:{
        //根据id获取某一条新闻
        getInfo(){
            this.$ajax({
                url:"/findNews/"+this.id,
                method:"get"

            }).then(resp=>{
                this.newsInfo = resp.data.message[0];
            });

        }
    },
    created(){
        this.getInfo();
    }
}

</script>
<style scoped>
.newsinfo{
    padding:8px 4px;
}
.title{
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color:red;

}
.subtitle{
    font-size: 13px;
    color:#226aff;
    display: flex;
    justify-content: space-between;
}
/* 用来解决互联网图片的额问题，以及index.html要加入  <meta name="referrer" content="no-referrer"> */
 /* .content >>> img {
    max-width: 100%;
    height: auto;
  } */

.content >>>img {
    max-width: 100%;
    height: auto;
  }
</style>
